import React from "react";
import { Form, Input, Button, Checkbox, message } from 'antd';
import {service} from "../service/service";
import {inject} from "../utils/inject_service";
import {observer} from "mobx-react";

import "antd/lib/form/style";
import "antd/lib/input/style";
import "antd/lib/button/style";
import "antd/lib/radio/style";
import "antd/lib/message/style";
import "../css/reg.css";

@inject({service})
@observer
export default class Login extends React.Component{
    constructor(props) {
        super(props);
    }

    layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 8 },
    };
    tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };

    sccessed(){
        message.success("登录成功!");
    }

    failed(){
        message.error("用户名密码错误!");
    }

    login(value){
        console.log(value);
        let {username, password, remember} = value;
        this.props.service.login(this, username, password, remember);
    }

    render() {
        if (this.props.service.login_status){
            return (
                <h1>你已成功登录</h1>
            );
        }

        return (
            <div className="input_table">
                <Form
                    {...this.layout}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={this.login.bind(this)}
                    // onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item {...this.tailLayout} name="remember" valuePropName="checked">
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>

                    <Form.Item {...this.tailLayout}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>

        )
    }
}